<template>
	<view>
		<view class="container">
			<!-- <image class="img-bg" src="/static/icon/icon_back9.png" mode="aspectFill"></image> -->
			<view class="main">
				<view class="main-inner">
					<view class="mb15 fs48 col-f">分享签到</view>
					<view class="mb40 fs28 col-f">坚持打卡签到领积分，可以参加抽奖哦!</view>
					<view class="poster-wrap mlrauto mb40">
						<view class="poster-box">
							<image @longpress="saveImage" :src="path" mode="widthFix" style="width: 100%;"></image>
							<!-- 画板 -->
							<l-painter isCanvasToTempFilePath @success="path = $event" custom-style="position: fixed; left: 200%"
								@progress="progress()" css="width: 630rpx;height: 865rpx;background: #fff;">
								<l-painter-view css="padding: 40rpx 45rpx;">
									<l-painter-view css="margin: 0 0 30rpx;">
										<l-painter-text :text="day" css="font-size: 36rpx; color: #000000;vertical-align:bottom;" />
										<l-painter-text :text="yearMonth" css="font-size: 28rpx; color: #000000;vertical-align:bottom;" />
									</l-painter-view>
									<l-painter-text :text="week"
										css="position: absolute;top: 10rpx;right: 0; font-size: 28rpx; color: #000000;" />
									<l-painter-image :src="poster.image"
										css="margin: 0 0 40rpx; object-fit: cover; object-position: 50% 50%; width: 100%; height: 568rpx;" />
									<l-painter-text :text="poster.propagate"
										css="width: 340rpx; font-size: 24rpx; color: #000000;line-height: 40rpx;line-clamp:3;" />
									<l-painter-image :src="poster.qrcode"
										css="position: absolute;bottom: 0rpx;right: 0; object-fit: cover; object-position: 50% 50%; width: 108rpx; height: 108rpx;" />
								</l-painter-view>
							</l-painter>
						</view>
						<view class="tip">—— 长按保存海报图片 ——</view>
					</view>
					<view class="btn-change flex-box flex-center" @click="wenanPopOpen">
						<image class="mr15" src="/static/icon/icon_news4.png" mode="aspectFit"></image>
						<view class="fs28 col-f fwb">更换推荐语</view>
					</view>
				</view>
			</view>
		</view>
		<!--  -->
		<uni-popup ref="wenanPopup" type="bottom">
			<view class="wenan-popup" catchtouchmove="true">
				<view class="mb40 pb40 fs36 col-black m-hairline--bottom tc">推荐文案</view>
				<view class="wenan" v-if="sentenceLists.length>0">{{ sentenceLists[sentenceIndex].name }}</view>
				<view class="clearfix mb50" @click="changeSentence()">
					<view class="fr">换一个</view>
				</view>
				<view @click="setSentence()" class="g-btn2">提交</view>
				<image @click="wenanPopClose" class="icon-close" src="/static/icon/icon_cancle.png" mode="aspectFit"></image>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				poster: {},
				sentenceLists: [],
				sentenceIndex: 0,
				path: '',
				yearMonth: '',
				day: '',
				week: ''
			};
		},
		onLoad() {
			this.fetchBackImage();
			this.fetchSentence();
		},
		methods: {
			fetchBackImage() {
				let platform = "wxmini";
				// #ifdef H5
				platform = "h5";
				// #endif
				this.$core.get({
					url: 'xiluedu.user/poster',
					data: {platform:platform},
					success: ret => {
						this.poster = ret.data;
						this.handlePoster();
						console.log(ret);
					}
				});
			},
			fetchSentence() {
				this.$core.get({
					url: 'xiluedu.user/sentence',
					data: {},
					success: ret => {
						this.sentenceLists = ret.data;
						console.log(ret);
					}
				});
			},

			changeSentence() {
				let sentenceLists = this.sentenceLists;
				let len = sentenceLists.length;
				this.sentenceIndex = Math.floor(Math.random() * len);
			},

			saveImage() {
				let that = this;
				uni.saveImageToPhotosAlbum({
					filePath: that.path,
					success: function() {
						uni.showToast({
							icon: 'success',
							title: '保存成功'
						});
					}
				});
			},
			progress(e) {
				uni.showLoading({});
				if (e == 1) {
					uni.hideLoading();
				}else{
					// #ifdef H5
					uni.hideLoading();
					// #endif
				}
			},
			// 打开弹窗
			wenanPopOpen() {
				this.$refs.wenanPopup.open();
			},
			// 关闭弹窗
			wenanPopClose() {
				this.$refs.wenanPopup.close();
			},
			handlePoster() {
				let dateStr = this.$formatDatetime(this.poster.updatetime, 'yyyy-mm-dd hh:ii:ss');
				let date = new Date(dateStr);
				const year = date.getFullYear();
				const month = date.getMonth() + 1;
				const day = date.getDate();
				const week = date.getDay();
				this.yearMonth = month + '/' + year;
				this.day = day + '/';
				this.week = '星期' + ['日', '一', '二', '三', '四', '五', '六'][week];
			},
			setSentence() {
				this.poster.propagate = this.sentenceLists[this.sentenceIndex].name;
				this.$refs.wenanPopup.close();
			}
		}
	};
</script>

<style scoped>
	.container {
		background: var(--bg1);
	}

	.img-bg {
		display: block;
		width: 100%;
		height: 100vh;
	}

	.main {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		padding: 45rpx 60rpx 40rpx;
		overflow-y: scroll;
	}
	
	.main-inner{
		margin: 0 auto;
		width: 100%;
	}

	.poster-wrap {
		width: 630rpx;
		height: 920rpx;
		background: #ffffff;
	}

	.poster-wrap .tip {
		width: 630rpx;
		height: 55rpx;
		background: rgba(237, 32, 53, 0.05);
		font-size: 20rpx;
		color: rgba(237, 31, 52, 0.3);
		line-height: 55rpx;
		text-align: center;
	}

	.poster-box {
		width: 630rpx;
		height: 865rpx;
	}

	.btn-change image {
		display: block;
		width: 38rpx;
		height: 36rpx;
	}

	/*  */
	.wenan-popup {
		position: relative;
		padding: 40rpx 30rpx 60rpx;
		background: #ffffff;
	}

	.wenan-popup .wenan {
		margin-bottom: 20rpx;
		height: 110rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #000000;
		line-height: 40rpx;
		overflow-y: scroll;
	}

	.wenan-popup .icon-close {
		position: absolute;
		top: 40rpx;
		right: 20rpx;
		padding: 10rpx;
		display: block;
		width: 40rpx;
		height: 40rpx;
		z-index: 10;
	}
	@media only screen and (min-width: 800px){
		.main-inner{
			padding: 0 60rpx;
			max-width: 800px;
		}
		.wenan-popup{
			max-width: 800px;
			margin-left: auto;
			margin-right: auto;
		}
	}
</style>